import { Matrix4 } from "three";
import GameObject from "../gameObject/GameObject";
import Geo from "../gameObject/Geo";
import Mat from "../gameObject/Mat";
import Mesh from "./Mesh";
import GameApplication from "../../system/GameApplication";

export default class MyImage extends Mesh {


    public constructor(name: string, image: HTMLImageElement, W: number, H: number) {
        const { gl } = GameApplication.app;

        const [faceW, faceH] = [W, H];
        const [faceVertices, faceElements] = [
            [
                -faceW, 0, -faceH,
                -faceW, 0, faceH,
                faceW, 0, faceH,
                faceW, 0, -faceH,
            ], [0, 1, 2, 0, 2, 3]
        ];

        const geo = new Geo({
            data: {
                'a_Position': { size: 3, array: new Float32Array(faceVertices) },
                'a_Pin': { size: 2, array: new Float32Array([0, 1, 0, 0, 1, 0, 1, 1]) },
            },
            element: { array: new Uint16Array(faceElements) }
        });
        const mat = new Mat({
            program: 'image',
            mode: ['TRIANGLES'],
            data: {
                'u_PvM4': { type: 'uniformMatrix4fv', value: GameApplication.getCamera()?.getPvM4().elements },
                'u_ModelM4': { type: 'uniformMatrix4fv', value: new Matrix4().elements },
            },
            maps: {
                'u_Sampler': {
                    image: image,
                    WRAP_W: gl.CLAMP_TO_EDGE,
                    WRAP_H: gl.CLAMP_TO_EDGE,
                    MIN_FILTER: gl.LINEAR,
                },
            }
        });


        super(name, { geo: geo, mat: mat });
    }



}